// 阴影
@mixin shadow($h-shadow:0, $v-shadow:0, $blur:4px, $spread-color:rgba(0, 0, 0, 0.2)) {
  -webkit-box-shadow: $h-shadow $v-shadow $blur $spread-color;
  -moz-box-shadow: $h-shadow $v-shadow $blur $spread-color;
  -ms-box-shadow: $h-shadow $v-shadow $blur $spread-color;
  -o-box-shadow: $h-shadow $v-shadow $blur $spread-color;
  box-shadow: $h-shadow $v-shadow $blur $spread-color;
}

//水平垂直居中
@mixin hv-center($position-set:absolute) {
  position: $position-set;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

//水平居中
@mixin h-center($position-set:absolute) {
  position: $position-set;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

//垂直居中
@mixin v-center($position-set:absolute) {
  position: $position-set;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

//动画
@mixin e-transition($property:all, $duration:0.3s, $timing-function:ease-in-out, $delay:0s) {
  -webkit-transition: $property $duration $timing-function $delay;
  -moz-transition: $property $duration $timing-function $delay;
  -ms-transition: $property $duration $timing-function $delay;
  -o-transition: $property $duration $timing-function $delay;
  transition: $property $duration $timing-function $delay;
}

@mixin cancle-transition {
  -webkit-transition: unset;
  -moz-transition: unset;
  -ms-transition: unset;
  -o-transition: unset;
  transition: unset;
}

//左偏移
@mixin e-transformX($val:-100%) {
  -webkit-transform: translateX($val);
  -moz-transform: translateX($val);
  -ms-transform: translateX($val);
  -o-transform: translateX($val);
  transform: translateX($val);
}

//旋转
@mixin e-rotate($val:0) {
  -webkit-transform: rotate($val);
  -moz-transform: rotate($val);
  -ms-transform: rotate($val);
  -o-transform: rotate($val);
  transform: rotate($val);
}

@mixin e-transformAll($translate:translate(0,0),$rotate:rotate(0)) {
  -webkit-transform: $translate $rotate;
  -moz-transform: $translate $rotate;
  -ms-transform: $translate $rotate;
  -o-transform: $translate $rotate;
  transform: $translate $rotate;
}

//transition-origin
@mixin e-transform-origin($x-axis: center,$y-axis: center) {
  -webkit-transform-origin: $x-axis $y-axis;
  -ms-transform-origin: $x-axis $y-axis;
  -moz-transform-origin: $x-axis $y-axis;
  -o-transform-origin: $x-axis $y-axis;
  transform-origin: $x-axis $y-axis;
}

//取图意图片样式
@mixin image-show($width: 44px, $height:44px, $border-radius:50%) {
  width: $width;
  height: $height;
  border-radius: $border-radius;
  background: #F2F2F2;
  overflow: hidden;

  img {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
//剧中
@mixin center() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

//flex布局
@mixin flex() {
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

//flex伸缩
@mixin box-flex($num:1) {
  -moz-box-flex: $num;
  -webkit-box-flex: $num;
  -ms-flex: $num;
  -webkit-flex: $num;
  flex-grow: $num;
  flex-shrink: $num;
}

//flex垂直流
@mixin v-flex-direction() {
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

//flex水平流
@mixin h-flex-direction() {
  -moz-box-orient: horizontal;
  -webkit-box-orient: horizontal;
  -ms-flex-direction: row;
  -moz-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

//超出显示省略
@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
